<template>
  <div class="container">
    <el-page-header @back="goBack" content="废品分类"></el-page-header>

    <el-row type="flex" justify="space-between" class="nav-bar">
      <el-col :span="3">
        <el-button type="primary" icon="el-icon-plus" plain @click="create">新建分类</el-button>
      </el-col>
      <!-- <el-col class="text-right">
        <el-form :inline="true" label-width="100px" class="nav-bar-form">
          <el-form-item>
            <el-input placeholder="关键词搜索" v-model="key" clearable prefix-icon="el-icon-search" @clear="getList">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col> -->
    </el-row>

    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column width="150">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px" :src="fileURL + scope.row.icon">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称">
      </el-table-column>
      <el-table-column label="客户组" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.isweighing?'按重量':'按件数' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上门回收价-个人(元)" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.minuserprice }}</span>
          <span>-</span>
          <span>{{ scope.row.highuserprice }}</span>
        </template>
      </el-table-column>
      <el-table-column label="站点回收价-线下(元)" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.minfitprice }}</span>
          <span>-</span>
          <span>{{ scope.row.highfitprice }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上门回收价-客户组(元)" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.minenterpriseprice }}</span>
          <span>-</span>
          <span>{{ scope.row.highenterpriseprice }}</span>
        </template>
      </el-table-column>
      <el-table-column label="站点回收价-线上(元)" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.minbrotherprice }}</span>
          <span>-</span>
          <span>{{ scope.row.highbrotherprice }}</span>
        </template>
      </el-table-column>
      <el-table-column label="出库价（元）" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.minpackstationprice }}</span>
          <span>-</span>
          <span>{{ scope.row.highpackstationprice }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="结算价格区间（元）" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.minsettlementprice }}</span>
          <span>-</span>
          <span>{{ scope.row.highsettlementprice }}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column prop="minweight" label="最小上门重量(公斤)" width="200">
			</el-table-column> -->
      <!-- <el-table-column prop="sort" label="排序" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.sort }}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="usestate" label="是否启用" width="100">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.state" @change="switchState($event, scope.row.id)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="250">
        <template slot-scope="scope">
          <!-- <el-button @click="save(scope.row.id,scope.row.sort)" type="text" size="small">修改排序</el-button> -->
          <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="lower(scope.row)" type="text" size="small">设置下级分类</el-button>
          <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="table-pagination">
      <el-pagination background layout="sizes, total, prev, pager, next" :total="total" :page-sizes="[10, 50, 100, 200]"
        :page-size="pageSize" :current-page="page" @current-change="pageChange" @size-change="handleSizeChange">
      </el-pagination>
    </div> -->
    <el-dialog :title="dialogType == 'add' ? '新建分类' : '编辑分类'" :visible.sync="dialogVisible" width="800px"
      @close="cancel">
      <el-form ref="form" :model="form" :rules="rules" label-width="180px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="brief">
          <el-input v-model="form.brief"></el-input>
        </el-form-item>
        <!-- <el-form-item label="图标名称" prop="icon">
					<el-input v-model="form.icon"></el-input>
				</el-form-item> -->
        <el-form-item label="上传图标" prop="icon">
          <cropper-upload :zoomScale='[1, 1]' :isCropper="true" @getUpload="handleFilesSuccess" class="avatar-uploader">
            <img v-if="form.icon" :src="fileURL + form.icon" class="avatar">
            <div class="avatar-uploader-icon" v-else>
              <div><i class="el-icon-plus"></i></div>
              <div class="e-font-14">上传图片</div>
            </div>
          </cropper-upload>
          <div class="tips">建议上传尺寸比例为200*200 </div>
        </el-form-item>
        <!-- <el-form-item label="上传小图标">
          <cropper-upload :zoomScale='[1, 1]' :isCropper="true" @getUpload="handleFilesSuccess1"
            class="avatar-uploader">
            <img v-if="form.smallicon" :src="fileURL + form.smallicon" class="avatar">
            <div class="avatar-uploader-icon" v-else>
              <div><i class="el-icon-plus"></i></div>
              <div class="e-font-14">上传图片</div>
            </div>
          </cropper-upload>
          <div class="tips">建议上传尺寸比例为50*50 </div>
        </el-form-item> -->
        <el-form-item label="最小上门重量(KG)" prop="minweight">
          <el-input v-model="form.minweight" type="number"></el-input>
        </el-form-item>
        <div class="flex el-form-item is-required">
          <label class="el-form-item__label e-w-180">上门回收价-个人(元/{{ form.isweighing?'KG':'件' }})</label>
          <div class="e-flex-1">
            <el-form-item prop="minuserprice" label-width="0px">
              <el-input v-model="form.minuserprice" type="number"></el-input>
            </el-form-item>
          </div>
          <span class="e-p-l-15 e-p-r-15">-</span>
          <div class="e-flex-1">
            <el-form-item prop="highuserprice" label-width="0px">
              <el-input v-model="form.highuserprice" type="number"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="flex el-form-item is-required">
          <label class="el-form-item__label e-w-180">站点回收价-线下(元/{{ form.isweighing?'KG':'件' }})</label>
          <div class="e-flex-1">
            <el-form-item prop="minfitprice" label-width="0px">
              <el-input v-model="form.minfitprice" type="number"></el-input>
            </el-form-item>
          </div>
          <span class="e-p-l-15 e-p-r-15">-</span>
          <div class="e-flex-1">
            <el-form-item prop="highfitprice" label-width="0px">
              <el-input v-model="form.highfitprice" type="number"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="flex el-form-item is-required">
          <label class="el-form-item__label e-w-180">上门回收价-客户组(元/{{ form.isweighing?'KG':'件' }})</label>
          <div class="e-flex-1">
            <el-form-item prop="minenterpriseprice" label-width="0px">
              <el-input v-model="form.minenterpriseprice" type="number"></el-input>
            </el-form-item>
          </div>
          <span class="e-p-l-15 e-p-r-15">-</span>
          <div class="e-flex-1">
            <el-form-item prop="highenterpriseprice" label-width="0px">
              <el-input v-model="form.highenterpriseprice" type="number"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="flex el-form-item is-required">
          <label class="el-form-item__label e-w-180">站点回收价-线上(元/{{ form.isweighing?'KG':'件' }})</label>
          <div class="e-flex-1">
            <el-form-item prop="minbrotherprice" label-width="0px">
              <el-input v-model="form.minbrotherprice" type="number"></el-input>
            </el-form-item>
          </div>
          <span class="e-p-l-15 e-p-r-15">-</span>
          <div class="e-flex-1">
            <el-form-item prop="highbrotherprice" label-width="0px">
              <el-input v-model="form.highbrotherprice" type="number"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="flex el-form-item is-required">
          <label class="el-form-item__label e-w-180">出库价(元/{{ form.isweighing?'KG':'件' }})</label>
          <div class="e-flex-1">
            <el-form-item prop="minpackstationprice" label-width="0px">
              <el-input v-model="form.minpackstationprice" type="number"></el-input>
            </el-form-item>
          </div>
          <span class="e-p-l-15 e-p-r-15">-</span>
          <div class="e-flex-1">
            <el-form-item prop="highpackstationprice" label-width="0px">
              <el-input v-model="form.highpackstationprice" type="number"></el-input>
            </el-form-item>
          </div>
        </div>
        <!-- <div class="flex el-form-item is-required">
          <label class="el-form-item__label e-w-180">结算价格范围(元/{{ form.isweighing?'KG':'件' }})</label>
          <div class="e-flex-1">
            <el-form-item prop="minsettlementprice" label-width="0px">
              <el-input v-model="form.minsettlementprice" type="number"></el-input>
            </el-form-item>
          </div>
          <span class="e-p-l-15 e-p-r-15">-</span>
          <div class="e-flex-1">
            <el-form-item prop="highsettlementprice" label-width="0px">
              <el-input v-model="form.highsettlementprice" type="number"></el-input>
            </el-form-item>
          </div>
        </div> -->
        <el-form-item label="计算单位">
					<el-radio-group v-model="form.isweighing">
						<el-radio :label="true">按重量(KG)</el-radio>
						<el-radio :label="false">按数量(件)</el-radio>
					</el-radio-group>
				</el-form-item>
        <el-form-item :label="form.isweighing?'设置范围(KG)':'设置范围(件)'" prop="range">
          <div class="flex">
            <div class="flex">
              <el-input @input="imin" v-model="set.min"></el-input>
              <span class="e-p-l-15 e-p-r-15">-</span>
              <el-input @input="imax" v-model="set.max"></el-input>
            </div>
            <el-button size="mini" icon="el-icon-plus" @click="setRange" v-if="set.min && set.max">添加范围</el-button>
          </div>

          <div class="rangeList">
            <el-tag v-for="(item, index) in form.range" :key="index" closable @close="handleClose(index)">
              {{ item.min }}-{{ item.max }}{{ form.isweighing?'KG':'件' }}
            </el-tag>
          </div>
        </el-form-item>
        
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :disabled="btnstate" @click="cancel">取消</el-button>
        <el-button type="primary" :disabled="btnstate"  @click="submitType">{{ dialogType == 'add' ? '添加' : '修改'}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  layout: 'admin',
  head() {
    return {
      title: '废品分类' 
    }
  },
  data() {
    return {
      btnstate:false,
      key: '',
      page: 1,
      pageSize: 10,
      loading: false,
      total: 0,
      dialogVisible: false,
      dialogType: 'add',
      set: {
        min: '',
        max: ''
      },
      form: {
        name: '',
        icon: '',
        smallicon: '',
        minweight: '',
        minuserprice: null,
        highuserprice: null,
        minfitprice: null,
        highfitprice: null,
        minbrotherprice: null,
        highbrotherprice: null,
        // minsettlementprice: 0,
        // highsettlementprice: 0,
        minenterpriseprice: null,
        highenterpriseprice: null,
        minuserprice:null,
        highuserprice:null,
        minpackstationprice: null,
        highpackstationprice: null,
        range: [

        ],
        isweighing: true
      },
      rules: {
        name: [{
          required: true,
          message: '请填写废品分类名称',
          trigger: 'blur'
        }],
        icon: [{
          required: true,
          message: '请填写图标名称',
          trigger: 'blur'
        }],
        minweight: [{
          validator: (rule, value, callback) => {
            if (!value) {
              return callback(new Error('请输入数字值'));
            }
            setTimeout(() => {
              value = parseFloat(value);
              if (!Number.isInteger(value)) {
                callback(new Error('请输入数字值'));
              } else {
                if (value > 20000) {
                  callback(new Error('最大值为20000'));
                } else {
                  callback();
                }
              }
            }, 1000);
          }
        },],
        minfitprice: [{
          required: true,
          message: '请填写最低价格',
          trigger: 'blur'
        }],
        highfitprice: [{
          required: true,
          message: '请填写最高价格',
          trigger: 'blur'
        }],
        minsettlementprice: [{
          required: true,
          message: '请填写最低价格',
          trigger: 'blur'
        }],
        highsettlementprice: [{
          required: true,
          message: '请填写最低价格',
          trigger: 'blur'
        }],
        minbrotherprice: [{
          required: true,
          message: '请填写最低价格',
          trigger: 'blur'
        }],
        highbrotherprice: [{
          required: true,
          message: '请填写最低价格',
          trigger: 'blur'
        }],
        minenterpriseprice: [{
          required: true,
          message: '请填写最低价格',
          trigger: 'blur'
        }],
        highenterpriseprice: [{
          required: true,
          message: '请填写最低价格',
          trigger: 'blur'
        }],
        range: [{
          type: 'array',
          required: true,
          message: '请至少添加一个重量范围,不能输入0或小数',
          trigger: 'change'
        }]
      },

      tableData: []
    }
  },
  watch: {
    dialogVisible(value) {
      if (!value) {
        this.set = {
          min: '',
          max: ''
        },
          this.form = {
            name: '',
            icon: '',
            smallicon: '',
            minweight: '',
            minuserprice: null,
            highuserprice: null,
            minfitprice: null,
            highfitprice: null,
            minbrotherprice: null,
            highbrotherprice: null,
            // minsettlementprice: 0,
            // highsettlementprice: 0,
            minenterpriseprice: null,
            highenterpriseprice: null,
            minpackstationprice: null,
            highpackstationprice: null,
            range: [

            ]

          }
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    //输入必须是整数切不能0开头
    imin(e) {
      // this.set.min = e.replace(/^(0+)|[^\d]+/g, '')
      // console.log(this.set.min)

    },
    imax(e) {
      // this.set.max = e.replace(/^(0+)|[^\d]+/g, '')
      // console.log(this.set.min)

    },
    cancel() {
      this.dialogVisible = false,
      this.$refs.form.clearValidate();
    },
    goBack() {
      this.$router.go(-1)
    },
    //修改状态
    switchState(event, id) {
      this.$axios.post('/Waste/Type/SetState', {
        ids: [id],
        state: event ? '已启用' : '已冻结'
      }).then((res) => {
        if (res.status == 0) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      }).catch((err) => {
        this.getList()
      })
      // this.dialogType == 'edit'
      // this.submitType()
    },
    // 设置重量范围
    handleClose(tag) {
      this.form.range.splice(tag, 1);
    },
    setRange() {

      if (Number(this.set.min) > Number(this.set.max)) {

        this.$message.error('最少值不能大于最大值');
        return
      }
      if (this.set.min > 9999) {
        this.$message.error('最少值不能大于9999');
        return
      }
      if (this.set.max > 9999) {
        this.$message.error('最大值不能大于9999');
        return
      }
      this.form.range.push({
        min: this.set.min,
        max: this.set.max
      })
      this.set.min = ''
      this.set.max = ''
    },
    // 修改排序
    save(id, sort) {
      this.$axios.get('/Waste/Type/ModifySort', {
        "Id": id,
        "Sort": sort,
      }).then((res) => {
        this.$message.success(res.msg);
      })
    },
    handleFilesSuccess(res, file) {
      console.log(res,file)
      if (file.status === "success") {
        this.loading = false
        this.form.icon = res.path
      }
    },
    handleFilesSuccess1(res, file) {
      if (file.status === "success") {
        this.loading = false
        this.form.smallicon = res.path
      }
    },
    getList() {
      this.tableData = []
      this.loading = true

      this.$axios.get('/Waste/Type/List', {
        "PageIndex": this.page,
        "PageSize": this.pageSize,
        "Key": this.key
      }).then((res) => {
        this.loading = false
        let datas = res
        datas.forEach((item) => {
          if (item.usestate == '已启用') {
            item.state = true
          } else {
            item.state = false
          }
        })
        this.tableData = datas;
        // this.total = res.total;
      }).catch(() => {
        this.loading = false
      })
    },
    submitType() {
      this.btnstate = true
      let api = ''
      if (this.dialogType == 'add') {
        api = '/Waste/Type/Create'
      }
      if (this.dialogType == 'edit') {
        api = '/Waste/Type/Edit'
      }

      this.$refs.form.validate((valid) => {
        if (valid) {

          if (Number(this.form.minfitprice) > Number(this.form.highfitprice)) {
            this.$message.error('默认价格范围的最少值不能大于最大值');
            return

          }
          if (Number(this.form.minenterpriseprice) > Number(this.form.highenterpriseprice)) {
            this.$message.error('客户组价格范围的最少值不能大于最大值');
            return

          }
          if (Number(this.form.minbrotherprice) > Number(this.form.highbrotherprice)) {
            this.$message.error('小哥价格范围的最少值不能大于最大值');
            return

          }
          // if (Number(this.form.minsettlementprice) > Number(this.form.highsettlementprice)) {
          //   this.$message.error('结算价格范围的最少值不能大于最大值');
          //   return
          // }
          if (Number(this.form.minsettlementprice) > Number(this.form.highsettlementprice)) {
            this.$message.error('结算价格范围的最少值不能大于最大值');
            return

          }

          this.$axios.post(api, this.form).then((res) => {
            this.$message.success(res.msg);
            this.dialogVisible = false;
            this.btnstate = false
            this.getList()
          }).catch(()=>{
            this.btnstate = false
          })
        } else {
          console.log('error submit!!');
          this.btnstate = false
          return false;
        }
      });
    },
    create() {
      this.dialogType = 'add'
      this.dialogVisible = true
    },
    lower(row) {
      this.$router.push({
        path: "/order/lower?id=" + row.id + '&type=' + row.name + '&isweighing='+ row.isweighing
      })
    },
    edit(row) {
      console.log(row)
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.btnstate = false

      this.form = row
    },
    search() {
      this.getList()
    },
    pageChange(e) { // 页码切换事件
      this.page = e;
      this.getList()
    },
    handleSizeChange(val) {
      this.page = 1;
      this.pageSize = val;
      this.getList()
    },
    del(id) {
      this.$confirm('此操作将删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('/Waste/Type/Delete?Id=' + id).then((res) => {
          this.$message.success(res.msg);
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style lang="scss">
.nav-bar {
  padding: 45px 0 0;
}

.send {
  margin-top: 15px;
  margin-right: 10px;
}

.dialogForm {
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    width: 50%;
    float: left;

    &.all {
      width: 100%;
    }

    .el-select {
      width: 100%;
    }
  }
}

// 设置重量范围
.rangeList {
  padding-top: 5px;

  .el-tag+.el-tag {
    margin-left: 10px;
  }
}
</style>
